<template>
  <div class="parent-card">
    <template v-if="cardData.length">
      <div :class="`list-box ${item.subList?'response':''}`" v-for="(item,index) in cardData" :key="index">
        <div :class="`${getClassName(item)} ${ $route.path.includes('/target') && item.id == changeId ? 'active' : ''}`">
          <div class="item-content">
            <div class="check-status" v-if="checkStatus">
              <i v-if="item.state == 0" class="el-icon-edit push"></i>
              <template v-else-if="item.state">
                <i v-if="item.state >= 2" class="el-icon-success checked"></i>
                <i v-if="item.state < 2" class="el-icon-remove noChecked"></i>
              </template>
            </div>

            <div class="title">
              <p>{{ item.name }}</p>
              <p>（{{ item.rangeName }}）</p>
            </div>
            <div class="info">
              <p class="ellipsis"><span>责任部门：</span>{{ item.dutyPartName || item.orgName || '-' }}</p>
              <p class="ellipsis"><span>诊改对象：</span>{{ item.objectName }}</p>
              <p><span>负责人：</span>{{ item.dutyUserName || item.realName }}</p>
              <p><span>管理员：</span>{{ item.adminName }}</p>
              <p><span>所属诊改阶段：</span>{{ item.year || '-' }}</p>
            </div>
          </div>
          <div class="item-mask" @click="changeParent(item.id)">
            <div v-permission="queryPermission" @click.stop="jumpList(item)" v-if="isQuery">
              <i class="el-icon-thumb"></i>查询
            </div>
            <div v-permission="editPermission" @click.stop="handle('edit', item.id)" v-if="isEdit && item.state == 0 && item.dutyPart == userInfo.orgId && (item.dutyUser == userInfo.id || item.adminId == userInfo.id)">
              <i class="el-icon-edit"></i>编辑
            </div>
            <div v-permission="releasePermission" @click.stop="handle('release', item.id)" v-if="isRelease && item.state ==0 && item.dutyPart == userInfo.orgId && (item.dutyUser == userInfo.id || item.adminId == userInfo.id)">
              <i class="el-icon-document-checked"></i>下发
            </div>
            <div v-permission="checkPermission" @click.stop="check(item)" v-if="isCheck && item.state < 3">
              <i class="el-icon-document-checked"></i>审核
            </div>
            <div v-permission="delPermission" @click.stop="handle('del', item.id)" v-if="isDelete && item.state ==0 && item.dutyPart == userInfo.orgId && (item.dutyUser == userInfo.id || item.adminId == userInfo.id)">
              <i class="el-icon-delete"></i>删除
            </div>
          </div>
        </div>
        <div v-for="(card,index) in item.subList" :key="index" class="list-item child-item">
          <div class="item-content">
            <div class="check-status" v-if="checkStatus">
              <!--模板管理state: 下发状态（0-未下发 1-待审核（下发后） 2-审核通过 3-发布成功 4-审核不通过）-->
              <!--除模板管理外state: 目标标准状态（0-未开始 1-进行中 2-结案）-->
              <i v-if="card.state == 0" class="el-icon-edit push"></i>
              <template v-else-if="card.state">
                <i v-if="card.state >= 2" class="el-icon-success checked"></i>
                <i v-if="card.state < 2" class="el-icon-remove noChecked"></i>
              </template>
            </div>
            <div class="title">
              <p>{{ card.name }}</p>
              <p class="sub-title">{{ card.rangeName }}</p>
            </div>
            <div class="info">
              <p class="ellipsis"><span>责任部门：</span>{{ card.dutyPartName || card.orgName || '-' }}</p>
              <p><span>负责人：</span>{{ card.dutyUserName || item.realName }}</p>
              <p><span>管理员：</span>{{ card.adminName }}</p>
              <p><span>所属诊改阶段：</span>{{ card.year || '-' }}</p>
            </div>
          </div>
          <div class="item-mask" @click="changeParent(card.id)">
            <div v-permission="queryPermission" @click.stop="jumpList(card)" v-if="isQuery">
              <i class="el-icon-thumb"></i>查询
            </div>
            <div v-permission="editPermission" @click.stop="handle('edit', card.id, data)" v-if="isEdit && card.state ==0">
              <i class="el-icon-edit"></i>编辑
            </div>
            <div v-permission="releasePermission" @click.stop="handle('release', card.id, data)" v-if="isRelease && card.state ==0">
              <i class="el-icon-document-checked"></i>下发
            </div>
            <div v-permission="checkPermission" @click.stop="check(card)" v-if="isCheck && card.state < 3">
              <i class="el-icon-document-checked"></i>审核
            </div>
            <div v-permission="checkPermission" @click.stop="handle('checkRelease', card.id, data)" v-if="isCheck">
              <i class="el-icon-document-checked"></i>发布
            </div>
            <div v-permission="delPermission" @click.stop="handle('del', card.id)" v-if="isDelete && card.state ==0">
              <i class="el-icon-delete"></i>删除
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-else class="emptyText">
      暂无数据
    </div>
  </div>
</template>

<script>
import { getStorage } from '../../config/utils'
export default {
  name: 'parentCard',
  props: {
    // 查询，编辑，下发，审核，删除的权限
    queryPermission: {
      type: Object,
      default: null
    },
    editPermission: {
      type: Object,
      default: null
    },
    checkPermission: {
      type: Object,
      default: null
    },
    releasePermission: {
      type: Object,
      default: null
    },
    delPermission: {
      type: Object,
      default: null
    },
    cardData: {
      type: Array
    },
    levelType: {
      type: String
    },
    // 是否显示下发状态
    checkStatus: {
      type: Boolean,
      default: false
    },
    // 是否显示查询按钮
    isQuery: {
      type: Boolean,
      default: true
    },
    // 是否显示编辑按钮
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否显示下发按钮
    isRelease: {
      type: Boolean,
      default: false
    },
    // 是否显示审核按钮
    isCheck: {
      type: Boolean,
      default: false
    },
    // 是否显示删除按钮
    isDelete: {
      type: Boolean,
      default: false
    },
    // 是否为模板
    isModel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checked: false,
      changeId: '',
      userInfo: getStorage('userInfo')
    }
  },
  methods: {
    // 根据值返回className
    getClassName (card) {
      if (card.subList && card.subList.length) {
        return 'list-item parent-item'
      } else {
        return 'list-item child-item'
      }
    },
    // 跳转进入列表页
    jumpList (card) {
      this.$emit('jumpList', card.id, card)
    },
    // 审核
    check (card) {
      this.$emit('check', card.id, card)
    },
    // 编辑、下发、删除
    handle (type, id, data) {
      switch (type) {
        case 'edit':
          this.$emit('edit', id, data)
          break
        case 'release':
          this.$emit('release', id, data)
          break
        case 'del':
          this.$confirm('您确定要删除这些数据吗?', '删除', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.$emit('del', id)
            })
            .catch()
          break
        // case 'check':
        //     this.$emit('check', id, data);
        //     break
        case 'checkRelease':
          this.$emit('checkRelease', id, data)
          break
      }
    },
    // 选中的卡片
    changeParent (id, card) {
      this.changeId = id
      this.$emit('changeId', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.parent-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.list-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;

  .list-item {
    border: 14px solid $lineColor;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 10px 20px 10px 10px;
    cursor: pointer;
    transition: all 0.6s;
    position: relative;

    &:hover {
      .item-mask {
        visibility: visible;
      }
    }

    .item-content {
      .title {
        margin-top: 25px;
        font-weight: bold;
        line-height: 28px;
        font-size: 16px;
        padding: 0 10px;
      }

      .sub-title {
        font-size: 14px;
      }

      .info {
        width: 90%;
        margin: 20px auto;
        line-height: 24px;
        text-align: left;
        span {
          display: inline-block;
          width: 96px;
          text-align: right;
        }
      }

      .check-status {
        position: absolute;
        right: -10px;
        top: -10px;

        i {
          font-size: 34px;
        }
        i.checked {
          color: $green;
        }
        i.noChecked {
          color: $yellow;
        }
        i.push {
          color: $blue;
        }
      }
    }

    .item-mask {
      visibility: hidden;
      position: absolute;
      top: -14px;
      left: -14px;
      width: calc(100% + 28px);
      height: calc(100% + 28px);
      background: rgba(0, 0, 0, 0.2);
      font-size: 18px;
      font-weight: 600;
      color: $white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      > div {
        margin: 0 auto;
        width: 100px;
        line-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      > div:hover {
        color: $red;
      }
      i {
        font-size: 30px;
        margin-right: 15px;
      }
    }
  }
  .list-item.active {
    border: 14px solid $green;
  }

  .parent-item {
    width: 220px;
    height: 300px;
    margin-right: 50px;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      right: -30px;
      top: 120px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 16px solid $lineColor;
      border-bottom: 20px solid transparent;
      transition: all 0.6s;
    }
    &:hover:after {
      border-top: 20px solid transparent;
      border-left: 16px solid $lineColorDark;
      border-bottom: 20px solid transparent;
    }
  }

  .child-item {
    width: 200px;
    height: 280px;
  }
}
.list-box.response {
  width: 100% !important;
}
</style>
